<template>
  <div style="padding: 20px">
    <Alert message="标签示例" type="info" show-icon>
      <template #icon><smile-outlined /></template>
      <template #description>
        <div>组件属性：</div>
        <div>tagType: default和primary</div>
        <div>color: 背景颜色</div>
        <div>textColor: 字体颜色</div>
        <div>size: 标签大小(40,32,28,24,18)</div>
        <div>fillet: 是否为圆角</div>
        <div>ifForm: 是否为表单内标签</div>
      </template>
    </Alert>
    <div class="demoTittle">默认标签</div>
    <a-space :size="18">
      <Ztag textColor="#0052D9" :size="32" tagType="primary" fillet>选中标签</Ztag>
      <Ztag :size="32" fillet>默认标签</Ztag>
      <Ztag textColor="#0052D9" :size="32" tagType="primary">默认样式</Ztag>
      <Ztag :size="32">默认样式</Ztag>
      <template v-for="(tag, index) in state.tags" :key="tag">
        <Ztag v-if="tag" :size="32">{{ tag }}</Ztag>
      </template>
      <a-input
        v-if="state.inputVisible"
        ref="inputRef"
        v-model:value="state.inputValue"
        type="text"
        :style="{ width: '108px' }"
        @blur="handleInputConfirm"
        @keyup.enter="handleInputConfirm"
      />
      <Ztag :size="32" v-else style="background: #fff" @click="showInput">
        <plus-outlined />
        添加标签
      </Ztag>
    </a-space>
    <div class="demoTittle">普通标签</div>
    <a-space :size="18">
      <Ztag color="#0052D919" textColor="#0052D9" :size="32" fillet :bordered="false"
        >选中标签</Ztag
      >
      <Ztag color="#F5F5F5" textColor="#666666" :size="32" fillet :bordered="false">普通标签</Ztag>
    </a-space>
    <div class="demoTittle">表单内标签</div>

    <a-select
      v-model:value="value"
      mode="multiple"
      style="width: 240px"
      placeholder="Select Item..."
      :max-tag-count="2"
      :options="options"
    >
      <template #maxTagPlaceholder="omittedValues">
        <span>{{ omittedValues.length }}+</span>
      </template>
      <template #removeIcon
        ><CloseCircleFilled style="font-size: 14px; color: #cccccc; padding: 0 6px"
      /></template>
    </a-select>
    <div class="demoTittle2" style="margin: 40px 0 18px 0"
      >- 一等标签 高度为32px，左右边距为8px，文字14px，用于表单，列表，控件，页码；</div
    >
    <a-space :size="8">
      <Ztag color="#F5F5F5" textColor="#666666" :size="32" fillet :bordered="false" ifForm
        >技术部-张三155815555656</Ztag
      >
      <Ztag color="#F5F5F5" textColor="#666666" :size="32" fillet :bordered="false" ifForm
        >技术部-张三155815555656</Ztag
      >
    </a-space>
    <div class="demoTittle2" style="margin: 40px 0 18px 0"
      >- 二等标签 高度为24px，左右边距为8px，文字12px，边角4px；用于表单内；</div
    >
    <a-space direction="vertical">
      <a-space :size="30">
        <Ztag color="#E6F4FF" textColor="#1677FF" :size="24" fillet :bordered="false" ifForm
          >内部</Ztag
        >
        <Ztag color="#FFF6D6" textColor="#F5820F" :size="24" fillet :bordered="false" ifForm
          >外部</Ztag
        >
        <Ztag color="#EBF8E5" textColor="#09B840" :size="24" fillet :bordered="false" ifForm
          >判断题</Ztag
        >
        <Ztag color="#8A3FD426" textColor="#8A3FD4" :size="24" fillet :bordered="false" ifForm
          >填空题</Ztag
        >
      </a-space>
      <a-space :size="30">
        <Ztag color="#E6F4FF" textColor="#1677FF" :size="24" ifForm>蓝色</Ztag>
        <Ztag color="#FFFBE6" textColor="#F8AC30" :size="24" ifForm>黄色</Ztag>
        <Ztag color="#FAFAFA" textColor="#666666" :size="24" ifForm>默认</Ztag>
        <Ztag color="#FFF2F0" textColor="#FF4D4F" :size="24" ifForm>红色</Ztag>
      </a-space>
      <a-space :size="30">
        <Ztag color="#1677FF" textColor="#FFFFFF" :size="24" ifForm>内部</Ztag>
        <Ztag color="#F5820F" textColor="#FFFFFF" :size="24" ifForm>外部</Ztag>
        <Ztag color="#09B840" textColor="#FFFFFF" :size="24" ifForm>判断题</Ztag>
        <Ztag color="#8A3FD4" textColor="#FFFFFF" :size="24" ifForm>填空题</Ztag>
      </a-space>
    </a-space>
    <div class="demoTittle2" style="margin: 40px 0 18px 0"
      >- 三等标签 高度为18px，左右边距为8px，文字12px，边角4px；用于表单内；</div
    >
    <a-space :size="30">
      <Ztag color="#E6F4FF" textColor="#1677FF" :size="18" fillet :bordered="false" ifForm
        >内部</Ztag
      >
      <Ztag color="#FFF6D6" textColor="#F5820F" :size="18" fillet :bordered="false" ifForm
        >外部</Ztag
      >
      <Ztag color="#EBF8E5" textColor="#09B840" :size="18" fillet :bordered="false" ifForm
        >判断题</Ztag
      >
      <Ztag color="#8A3FD426" textColor="#8A3FD4" :size="18" fillet :bordered="false" ifForm
        >填空题</Ztag
      >
    </a-space>
    <div class="demoTittle2" style="margin: 40px 0 18px 0">-特殊标签配色</div>
    <a-space :size="30">
      <Ztag color="#E4E4E4" textColor="#666666" :size="24" ifForm>待辨识</Ztag>
      <Ztag color="#FA0101" textColor="#FFFFFF" :size="24" ifForm>重大风险</Ztag>
      <Ztag color="#FAC10D" textColor="#444444" :size="24" ifForm>较大风险</Ztag>
      <Ztag color="#F9FF03" textColor="#444444" :size="24" ifForm>重大风险</Ztag>
      <Ztag color="#04AFF1" textColor="#FFFFFF" :size="24" ifForm>低风险</Ztag>
    </a-space>
    <div class="demoTittle">标签大小</div>
    <div class="demoTittle2">- 标签大小分为40px,32px,28px,24px,18px</div>
    <a-space direction="vertical">
      <a-space :size="20">
        <Ztag textColor="#0052D9" :size="40" tagType="primary" fillet>默认标签</Ztag>
        <Ztag textColor="#0052D9" :size="32" tagType="primary" fillet>默认标签</Ztag>
        <Ztag textColor="#0052D9" :size="28" tagType="primary" fillet>默认标签</Ztag>
        <Ztag textColor="#0052D9" :size="24" tagType="primary" fillet>默认标签</Ztag>
        <Ztag textColor="#0052D9" :size="18" tagType="primary" fillet>默认标签</Ztag>
      </a-space>
      <a-space :size="20">
        <Ztag color="#F5F5F5" textColor="#666666" :size="40" :bordered="false">默认标签</Ztag>
        <Ztag color="#F5F5F5" textColor="#666666" :size="32" :bordered="false">默认标签</Ztag>
        <Ztag color="#F5F5F5" textColor="#666666" :size="28" :bordered="false">默认标签</Ztag>
        <Ztag color="#F5F5F5" textColor="#666666" :size="24" :bordered="false">默认标签</Ztag>
        <Ztag color="#F5F5F5" textColor="#666666" :size="18" :bordered="false">默认标签</Ztag>
      </a-space>
    </a-space>
  </div>
</template>
<script setup lang="ts">
  import { Alert } from 'ant-design-vue';
  import { SmileOutlined, CloseCircleFilled, PlusOutlined } from '@ant-design/icons-vue';
  import Ztag from '@/components/basic/tag/tags.vue';
  import type { SelectProps } from 'ant-design-vue';
  import { ref, reactive, nextTick } from 'vue';

  const options = ref<SelectProps['options']>([
    {
      label: '黄埔',
      value: 1,
    },
    {
      label: '张江',
      value: 2,
    },
    {
      label: '张去',
      value: 3,
    },
    {
      label: '张为',
      value: 4,
    },
    {
      label: '张呃',
      value: 5,
    },
  ]);
  const value = ref(['黄埔', '张江', '张去', '张为', '张呃']);

  const inputRef = ref();
  const state = reactive({
    tags: [''],
    inputVisible: false,
    inputValue: '',
  });
  const showInput = () => {
    state.inputVisible = true;
    nextTick(() => {
      inputRef.value.focus();
    });
  };

  const handleInputConfirm = () => {
    const inputValue = state.inputValue;
    let tags = state.tags;
    if (inputValue && tags.indexOf(inputValue) === -1) {
      tags = [...tags, inputValue];
    }
    console.log(tags);
    Object.assign(state, {
      tags,
      inputVisible: false,
      inputValue: '',
    });
  };
</script>
<style lang="less" scoped>
  .demoTittle {
    font-size: 20px;
    font-weight: 400;
    color: #444444;
    margin: 20px 0;
  }
  .demoTittle2 {
    color: #494a4a;
    font-size: 14px;
    margin-bottom: 18px;
  }
</style>
